<template>

    <div class="filter-container">
        <ul @click="filterClick">
            <li v-for="item in filterData" :class="{ 'active': item.index == 1 }"><span class="dot">{{ item.label
                    }}</span>
            </li>
        </ul>
    </div>
</template>
<script setup lang="ts">
import { type filter } from './type'
import { onMounted } from 'vue'
const emit = defineEmits(['filterClick'])
defineProps({
    filterData: Object as () => Array<filter>
})
onMounted(() => {
    emit('filterClick', '昨日')
})

const filterClick = (e: any) => {
    if (e.target.tagName.toLowerCase() === 'li') {
        let liList = e.target.parentNode.children
        for (let index = 0; index < liList.length; index++) {
            liList[index].classList.remove('active');
        }
        e.target.classList.add('active')
    }
    emit('filterClick', e.target.innerText)
}

</script>
<style lang="scss" scoped>
.filter-container {
    margin-bottom: 20px;
    font-size: 14px;

    ul {
        display: inline-flex;
        line-height: 40px;
        border: 1px solid #e5e4e4;
        border-radius: 4px;
        background-color: $card-color;
        border-right: none;
        margin-right: 20px;

        li {
            flex: 1;
            width: 140px;
            text-align: center;
            border-right: 1px solid #e5e4e4;
            color: #333;
            cursor: pointer;
        }

        span {
            color: #666666;
            font-size: 14px;
        }

        .active {
            background-color: $base-orange;
            font-weight: 700;
        }
    }
}
</style>